<!--菜单1：首页中的用水概况-->
<template>
    <div class="useEle">
        <!--    用电用水量等信息-->
        <div class="top">
            <div class="top-box">
                <div class="top-box-top"><span class="font">今日用水</span><span class="font-short">kWh</span></div>
                <div class="top-box-bottom">{{ useWater.day_water }}</div>
            </div>
            <div class="top-box">
                <div class="top-box-top"><span class="font">本月用水</span><span class="font-short">kWh</span></div>
                <div class="top-box-bottom">{{ useWater.month_water }}</div>
            </div>
            <div class="top-box">
                <div class="top-box-top"><span class="font">今年用水</span><span class="font-short">kWh</span></div>
                <div class="top-box-bottom">{{ useWater.year_water }}</div>
            </div>
            <div class="top-box">
                <div class="top-box-top"><span class="font">单位面积用水</span><span class="font-long">kWh/㎡/年</span></div>
                <div class="top-box-bottom">{{ useWater.avg_water }}</div>
            </div>
            <div class="top-box">
                <div class="top-box-top"><span class="font">人均用水</span><span class="font-long">kWh/人/年</span></div>
                <div class="top-box-bottom">{{ useWater.people_water }}</div>
            </div>
        </div>
        <!--    图表信息-->
        <div class="bottom">
            <div id="chart-3">柱形图</div>
            <div id="chart-4">柱形图</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "UseWater",
    data() {
        return {
            test: 1,
            useWater: [],
            chart1Data: [],
            chart2Data: []
        }
    },
    mounted() {
        this.queryWaterMessage();
        this.getChartData();
        this.drawLineChartMonth();
        this.drawLineChartDay();
    },
    methods: {
        queryWaterMessage() {
            this.axios.get('/api/module1/WaterMsg').then(resp => {
                this.useWater = resp.data.list[0];
                console.log(this.useWater)
            })
        },
        getChartData() {
            this.chart1Data = [
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700],
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700],
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700],
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700]
            ];
            this.chart2Data = [
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500,],
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500,],
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500,],
                [500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500, 700, 500, 600, 500,],
            ];

        },
        drawLineChartMonth() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.echarts.init(document.getElementById('chart-3'))
            // 绘制图表
            myChart.setOption({
                color: ['#2194EF', '#009933', '#003366', '#CC6633'],
                title: {
                    text: '月水耗（单位：t）',
                    x: 'center',
                    y: 'top',
                },
                legend: {
                    type: 'scroll',
                    selectedMode: false,
                    x: 'center',
                    y: 'top',
                    padding: 30
                },
                tooltip: {},
                xAxis: {
                    // splitLine: {
                    //     show: false
                    // }
                    data: Array.from({length: 12}, (v, k) => k + 1)
                },
                yAxis: {
                    // minInterval: 5000,
                    // interval: 5000
                },
                grid: {
                    x2: 0,
                    y2: 25
                },
                series: [{
                    name: '总用水量',
                    type: 'bar',
                    data: this.chart1Data[0]
                }, {
                    name: '用水量1',
                    type: 'bar',
                    stack: '用水量',
                    data: this.chart1Data[1]
                }, {
                    name: '用水量2',
                    type: 'bar',
                    stack: '用水量',
                    data: this.chart1Data[2]
                }, {
                    name: '用水量3',
                    type: 'bar',
                    stack: '用水量',
                    data: this.chart1Data[3]
                }]
            });
        },
        drawLineChartDay() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.echarts.init(document.getElementById('chart-4'))
            // 绘制图表
            myChart.setOption({
                color: ['#2194EF', '#009933', '#003366', '#CC6633'],
                title: {
                    text: '日水耗（单位：t）',
                    x: 'center',
                    y: 'top',
                },
                legend: {
                    type: 'scroll',
                    selectedMode: false,
                    x: 'center',
                    y: 'top',
                    padding: 30
                },
                tooltip: {},
                xAxis: {
                    data: Array.from({length: 31}, (v, k) => k + 1)
                },
                yAxis: {
                    // minInterval: 5000,
                    // interval: 5000
                },
                grid: {
                    x2: 0,
                    y2: 25
                },
                series: [{
                    name: '总用水量',
                    type: 'bar',
                    data: this.chart2Data[0]
                }, {
                    name: '用水量1',
                    type: 'bar',
                    stack: '用水量',
                    data: this.chart2Data[1]
                }, {
                    name: '用水量2',
                    type: 'bar',
                    stack: '用水量',
                    data: this.chart2Data[2]
                }, {
                    name: '用水量3',
                    type: 'bar',
                    stack: '用水量',
                    data: this.chart2Data[3]
                }]
            });
        }
    },
}
</script>

<style scoped>
.useEle {
    width: 100%;
    height: 656px;
}

.top {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-around; /* 相对父元素水平居中 */
    align-items: center; /*  子元素相对父元素垂直居中 */
}

.bottom {
    width: 100%;
    height: 70%;
    display: flex;
}

.bottom div {
    /* border: 1px solid red; */
    width: 50%;
    height: 100%;
}

.top-box {
    width: 15%;
    height: 60%;
}

.top-box-top {
    width: 100%;
    height: 30%;
    background-color: #92C9F5;
    font-size: 12px;
    line-height: 40px;
}

.font {
    margin-left: 10px;
}

.font-short {
    margin-left: 120px;
}

.font-long {
    margin-left: 70px;
}

.top-box-bottom {
    width: 100%;
    height: 70%;
    border-radius: 2px;
    background-color: #2194EF;
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 90px;
    text-align: center;
}
</style>
